// src/App.js
import { useState, } from "react";
import './App.css'


import WebView from "./components/WebView";
import { site } from './siteConfig'

import { invoke } from '@tauri-apps/api/core'

function handleSendShortcut(code: number) {
  console.log("%c Line:12 🍕 code", "color:#ffdd4d", "模拟按键",code);
  invoke('send_shortcut', {
    codes:[code]
  })
}


function App() {
  const [activeIndex, setActive] = useState(0);
  console.log("%c Line:12 🍅 activeIndex", "color:#465975", activeIndex);

  return (
    <div className="App">
      <nav >
        {site?.map?.((item, i) => {
          return <div key={item.name} className={i === activeIndex ? 'active' : ''} onClick={() => setActive(i)}>{item.name}</div>
        })}
      
      
      </nav>
      <div className="webviews">
        
        {site?.map?.((item, i) => {
          return <WebView key={item.name} id={item.name} className="webview" url={item.url} visible={i === activeIndex} />
        })}

      </div>
    </div>
  );
}

export default App;
